<!-- 相片 -->
<template>
    <view class="photo-item-main" @click="viewPhoto">
        <view class="photo-item"
            :class="(props.itemData.DisplayState == 2 || props.itemData.DisplayState == 3) && !props.isPerson ? 'photo-item-read' : ''">
            <van-image :src="props.itemData.FilePath" fit="cover" radius="4px" />
            <AuthRole :dataItem="state.userInfo" v-if="props.itemData.PhotoType == 1" />
        </view>
        <!-- {{ props.isPerson }} ----  -->
        <view class="img-read" v-if="(props.itemData.DisplayState == 2 || props.itemData.DisplayState == 3) && !props.isPerson">
            <img src="@/assets/image/icon54.png" v-if="props.itemData.DisplayState == 3" alt="">
            <img src="@/assets/image/icon53.png" v-else alt="">
            <img src="@/assets/image/icon133.png" v-if="props.itemData.DisplayState == 3 && props.itemData.IsRead" alt="">
        </view>
        <view class="img-hot-read" v-if="props.itemData.DisplayState == 2 || props.itemData.DisplayState == 3">
            {{ props.itemData.DisplayState == 2 ? '红包照片' : props.itemData.DisplayState == 3 ? '阅后焚毁' : '' }}
        </view>
        <van-image-preview v-model:show="state.show" :images="props.userPhotoList" teleport="body" closeable
            :startPosition="props.photoIndex" @onChange="ev => state.curIndex = ev" @long-press="longPress">
            <!-- <template v-slot:index>第页</template> -->
            <template #image="{ src }">
                <van-image class="my-swipe-inner-layer-img" :src="src" fit="contain" v-if="(isImg(src) || state.isImgHide) || props.isPerson" />
            </template>
            <template #cover>
                <view class="read-img-box" v-if="(isCurItem().DisplayState == 2 || isCurItem().DisplayState == 3) && !state.isImgHide && !props.isPerson">
                    <view class="read-img-main">
                        <!-- 红包照片 -->
                        <view class="read-box" v-if="isCurItem().DisplayState == 2">
                            <img src="@/assets/image/icon53.png" />
                        </view>
                        <!-- 阅后即毁 -->
                        <view class="read-box" v-else>
                            <img src="@/assets/image/icon54.png" v-if="!props.itemData.IsRead" />
                            <img src="@/assets/image/icon133.png" v-else />
                        </view>
                        <text v-if="(isCurItem().DisplayState == 2)">红包照片</text>
                        <text v-if="(isCurItem().DisplayState == 3 && state.userInfo.VipState == 0)">按住屏幕查看2秒</text>
                        <view
                            v-if="isCurItem().DisplayState == 2 || (isCurItem().DisplayState == 3 && state.userInfo.VipState == 0)"
                            class="action-img" @click="btnAction(isCurItem())">{{ btnText(isCurItem()) }}</view>
                    </view>
                </view>
            </template>
        </van-image-preview>
    </view>
</template>

<script setup>
import { reactive, toRefs, onMounted, getCurrentInstance } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import { showLoadingToast, showToast } from 'vant';

import {
    UserPhotoLook, // 金币解锁照片 // 销毁图片 
} from '@/api/user/index.js'

let { proxy } = getCurrentInstance()

const props = defineProps({
    isPerson: {
        type: Boolean,
        default: false,
    },
    itemData: {
        type: Object,
        default: () => { }
    },
    userPhotoList: {
        type: Array,
        default: () => []
    },
    photoIndex: {
        type: Number,
        default: 0
    },
    userAllPhoto: {
        type: Array,
        default: () => []
    }
})
const state = reactive({
    active: 0,
    userInfo: {},
    show: false,
    curIndex: 0,
    isImgHide:false
})

const isRed = (src) => {
    let cur = props.userAllPhoto.find(o => o.FilePath == src)
    return cur
}

// 是否显示图片
const isImg = (src) => {
    let cur = props.userAllPhoto.find(o => o.FilePath == src)
    if (cur.DisplayState == 0) {
        return true
    } else {
        return cur.IsRead
    }
}

const isCurItem = () => {
    let item = props.userAllPhoto[state.curIndex]
    return item
}

// 按钮提示
const btnText = (item) => {
    let str = ""
    if (item.DisplayState == 2) {
        str = "发红包查看（" + item.Money + "金币）"
    }
    if (item.DisplayState == 3) {
        str = "成为会员查看6秒"
    }
    return str
}

// 点击按钮
const btnAction = (item) => {
    if (item.DisplayState == 2) {
        UserPhotoLookFn(item)
    }
    if (item.DisplayState == 3) {
        uni.navigateTo({
            url: "/pages/home/person/openMemberPage/index"
        })
        return
    }
}

const longPress = () => {
    let item = props.userAllPhoto[state.curIndex]
    UserPhotoLook2Fn(item)
}

// 解锁红包照片
const UserPhotoLookFn = async (item) => {
    let { ID } = item
    // {"userID":151707,"photoID":607,"lockType":2,"lookType":2} 红包解锁
    // {"userID":151707,"photoID":605,"lockType":1,"lookType":3} 查看销毁
    let params = { "userID": state.userInfo.ID, "photoID": ID, "lockType": 2, "lookType": 2 }
    try {
        showLoadingToast({
            forbidClick: true,
            loadingType: 'spinner',
        });
        let data = await proxy.$post(UserPhotoLook, params)
        state.isImgHide = true
        closeToast();
    } catch (error) {
        showToast(error.message);
        closeToast();
    }
}

// 长按2秒解锁
const UserPhotoLook2Fn = async (item) => {
    let { ID } = item
    let params = { "userID": state.userInfo.ID, "photoID": ID, "lockType": 1, "lookType": 3 }
    // {"userID":151707,"photoID":607,"lockType":2,"lookType":2} 红包解锁
    // {"userID":151707,"photoID":605,"lockType":1,"lookType":3} 查看销毁
    try {
        showLoadingToast({
            forbidClick: true,
            loadingType: 'spinner',
        });
        let data = await proxy.$post(UserPhotoLook, params)
        state.isImgHide = true
        closeToast();
    } catch (error) {
        showToast(error.message);
        closeToast();
    }
}

let { active } = toRefs(state)

let userInfo = JSON.parse(getAuthorization("userInfo"))
state.userInfo = userInfo

onMounted(() => {
    state.curIndex = props.photoIndex
})

const goBack = () => {
    history.back()
}

const viewPhoto = () => {
    state.show = true
}

</script>

<style lang="scss" scoped>
.photo-item-main {
    width: 100%;
    height: 318rpx;
    overflow: hidden;
    border-radius: 8rpx;
    position: relative;
}

.photo-item {
    width: 100%;
    height: 318rpx;
    position: reactive;

    .van-image {
        width: 100%;
        height: 318rpx;
    }
}

.photo-item-read {
    .van-image {
        -webkit-filter: blur(20px);
        filter: blur(20px)
    }
}

.img-hot-read {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60rpx;
    line-height: 60rpx;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, .5);
}

.img-read {
    position: absolute;
    width: 92rpx;
    z-index: 66;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);

    img {
        width: 100%;
    }
}

.read-img-box {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .read-img-main {
        text-align: center;

        text {
            display: block;
            color: #f00;
            font-weight: 800;
            font-size: 32rpx;
            margin-bottom: 30rpx;
        }

        .action-img {
            line-height: 88rpx;
            padding: 0 50rpx;
            color: #683207;
            font-size: 32rpx;
            border-radius: 44rpx;
            background: linear-gradient(#F3D1A6, #DAAD74); //backgournd可以设置所有背景属性
        }
    }
}
:deep(.view-item-auth){
    top:10rpx!important;
}
</style>
